<template>
    <div>
        <el-card style="border:0px" shadow="never">
            <template slot="header">
                <el-input :maxlength="10" show-word-limit v-model="params.name" style="width: 220px;margin-right: 10px" placeholder="按顶级菜单名称查询"></el-input>
                <el-button v-if="$permissionPoint('point-permission-search')" type="primary" icon="el-icon-search" plain @click="getPermissionList(params)">查询数据</el-button>
                <el-button v-if="$permissionPoint('point-permission-save')" type="primary" icon="el-icon-plus" plain @click="openPermissionWindow('systemPermissionChild',null)">新增权限</el-button>
            </template>
            <el-table :data="permissionList"
                      v-loading="loading"
                      element-loading-text="玩命加载中...请稍后...."
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 1)"
                      :tree-props="{children: 'children'}"
                      size="mini"
                      :height="600"
                      row-key="id">
                <el-table-column prop="name" label="权限名称"></el-table-column>
                <el-table-column prop="code" label="权限编码" align="center"></el-table-column>
                <el-table-column prop="type" label="权限类型" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.type == '1' ? 'success' : (scope.row.type == '2' ? 'warning' : 'danger')" style="width: 100%;height: 100%;">
                            {{scope.row.type == '1' ? '菜单级权限' : (scope.row.type == '2' ? '按钮级权限' : 'API级权限')}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" v-if="$permissionPoint('point-permission-update')" icon="el-icon-edit" plain size="mini" @click="openPermissionWindow('systemPermissionChild',scope.row)">修改</el-button>
                        <el-button type="danger"  v-if="$permissionPoint('point-permission-remove')" icon="el-icon-close" plain size="mini" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <system-permission-child ref="systemPermissionChild"></system-permission-child>
    </div>
</template>

<script>

    import { getPermissionList,removePermission } from '@/api/system/access/permission'
    export default {
        name: "system-permission-index",
        components:{
            SystemPermissionChild:()=>import("@/views/system/access-manager/system-permission-child.vue")
        },
        data(){
            return {
                params:{},
                permissionList:[],
                loading:true
            }
        },
        methods:{
            getPermissionList(data){
                getPermissionList(data).then(res=>{
                    if(res.data.success){
                        this.permissionList = res.data.data;
                        this.loading = false;
                    }
                });
            },
            openPermissionWindow(name,data){
                if(data == null){
                    this.$refs[name].data = {};
                }else{
                    this.$refs[name].data = data;
                }
                this.$refs[name].value = true;
            },
            remove(row){
                if(row.children && row.children.length > 0){
                    this.$message.warning({message:'拥有下级,无法删除',center:true});
                    return false;
                }
                this.$confirm("确定要删除吗?","警告",{type:"warning"}).then(()=>{
                    removePermission({id:row.id}).then(res=>{
                        this.getPermissionList(this.params);
                    });
                });
            }
        },
        created(){
            console.log(this.$permissionPoint('point-permission-search'));
            this.getPermissionList(this.params);
        }
    }
</script>

<style scoped>

</style>